<template>
	<view class="content_area">
		<cu-custom :isBack="true" :noDiv="false">
		    <block slot="content" style="color: #FFFFFF;font-size: 20px;">领取奖品</block>
		</cu-custom>
		<view class="main">
			<view class="desc">
				<view class="title">您的兑奖码：</view>
				<view class="link">
					<view class="link-desc code">
						{{code}}
					</view>
					<view class="copy" @click="copyCode">
						复制
					</view>
				</view>
				<view class="title">奖品兑换链接：</view>
				<view class="link">
					<view class="link-desc">
						{{link}}
					</view>
					<view class="copy" @click="copyFun">
						复制
					</view>
				</view>
			</view>
		</view>
		<view class="image">
			<image class="one" mode='scaleToFill' src="@/static/img/img_redeem_introduce_01@2x.png"  alt="">
			<image class="two" mode="scaleToFill" src="@/static/img/img_redeem_introduce_02@2x.png" alt="">
			<image class="three" mode="scaleToFill" src="@/static/img/img_redeem_introduce_03@2x.png" alt="">
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import httpConfig from '@/config/httpConfig.js'
	export default {
		components: {
		},
		computed:{
			...mapState(['authflag','userinfo']),
		},
		
		
		data() {
			return {
				authType:['getUserInfo', 'getPhoneNumber'],
				CustomBar: this.CustomBar,
				// link: "https://shop43477879.m.youzanyouzanyouzanyouzanyouzanyouzanyouzanyouzanyouzanyouzanyouzanyouzan.com/wscgoods/detail/1yf69tc5yi7hb?scan=1&activity=none&from=kdt&qr=directgoods_901847285&shopAutoEnter=1",
				// code: "350144289051",
				link: '',
				code: ''
			}
		},
		async onLoad(option) {
			//等待登录成功	
			await this.$onLaunched;
			let params = JSON.parse(decodeURIComponent(option.params))
			if(params.code && params.codeUrl){
				this.link = params.codeUrl
				this.code = params.code
			}else{
				this.getPrizeCodeFun(params.id)
			}
		},
		onShow() {
		},
		
		methods: {
			getPrizeCodeFun(id){
				this.$api.getPrizeCode({lottery_id: id}).then(res => {
					this.link = res.url
					this.code = res.code
				})
			},
			copyCode(){
				uni.setClipboardData({
				    data: this.code,
				    success: function () {
				        uni.showToast({
				        	icon: "none",
				        	title: "兑换码拷贝成功",
				        })
				    },
					fail() {
						uni.showToast({
							icon: "none",
							title: "兑换码拷贝失败，请重试",
						})
					}
				});
			},
			copyFun(){
				uni.setClipboardData({
				    data: this.link,
				    success: function () {
				        uni.showToast({
				        	icon: "none",
				        	title: "链接拷贝成功",
				        })
				    },
					fail() {
						uni.showToast({
							icon: "none",
							title: "链接拷贝失败，请重试",
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content_area{
		background-color: #f7f7f7;
		background-image: url('@/static/img/img_navbar_red@2x.png');
		background-size: 100vw 414rpx;
		background-repeat: no-repeat;
		min-width: 100vw;
		min-height: 100vh;
		padding-bottom: 36rpx;
		.main{
			width: 686rpx;
			// height: 504rpx;
			margin: 32rpx auto 0;
			background: #FFFFFF;
			border-radius: 24rpx;
			z-index: 4;
			padding: 32rpx;
			.desc{
				font-size: 24rpx;
				color: #646464;
				line-height: 56rpx;
				font-weight: 500;
				.title{
					
				}
				.link{
					// height: 144rpx;
					line-height: 36rpx;
					min-height: 96rpx;
					background: #FDF8DF;
					border-radius: 16rpx;
					margin: 8rpx auto 16rpx;
					display: flex;
					padding:  24rpx;
					align-items: center;
					.link-desc{
						flex: 1;
						width: 500rpx;
						word-wrap:break-word;
						&.code{
							font-size: 36rpx;
						}
					}
					.copy{
						flex-shrink: 0;
						flex: 48rpx;
						text-align: right;
						font-size: 24rpx;
						color: #F82045;
						font-weight: 500;
					}
				}
			}
		}
		.image{
			width: 686rpx;
			margin: 0 auto;
			font-size: 0;
			.one{
				width: 686rpx;
				height: 1376rpx;
			}
			.two{
				width: 686rpx;
				height: 1366rpx;
			}
			.three{
				width: 686rpx;
				height: 756rpx;
			}
		}
	}
</style>
